import React from 'react'
import withRouter from '../withRouter'
import {connect} from 'react-redux'
import { NavBar } from 'antd-mobile'
import NavLinkBar from '../navlink/navlink'
import { Route, Routes } from 'react-router-dom'
// components 
import Boss from '../boss/boss'
import Genius from '../genius/genius'
import User from '../user/user'
import Msg from '../msg/msg'
import {getMsgList, sendMsg, recvMsg} from '../../redux/chat.redux'


// function Boss(params) {
//     return <h2>Boss首页</h2>
// }
// function Genius(params) {
//     return <h2>牛人首页</h2>
// }
@withRouter
@connect(
    state=>state,
    {getMsgList, recvMsg}
)
class Dashboard extends React.Component {
    componentDidMount() {
        if(!this.props.chat.chatmsg.length) {
            this.props.getMsgList()
            this.props.recvMsg()
        }
    }
    render(h) {
        // console.log(this.props)
        const user = this.props.user,
            pathname = this.props.location.pathname,
            navList = [
            {
                path: '/boss',
                text: 'Boss',
                icon: 'boss',
                title: 'Boss列表',
                component: <Boss />,
                hide: user.type === 'boss',
            },
            {
                path: '/genius',
                text: '牛人',
                icon: 'job',
                title: '牛人列表',
                component: <Genius />,
                hide: user.type === 'genius',
            },
            {
                path: '/msg',
                text: '消息',
                icon: 'msg',
                title: '消息列表',
                component: <Msg />,
            },
            {
                path: '/me',
                text: '我',
                icon: 'user',
                title: '个人中心',
                component: <User />,
            },
        ]
        if(pathname === '/') this.props.navigate('/login')
        const _title = navList.find(v=>v.path===pathname)?.title || ''
        return (
            <div>
                <NavBar className='fixd-header' mode='dark'>{_title}</NavBar>
                <div style={{marginTop:45}}>
                    <Routes>
                    {navList.map(v => (
                        <Route key={v.path} path={v.path} element={v.component}></Route>
                    ))}
                    </Routes>
                </div>
                <NavLinkBar data={navList}></NavLinkBar>
            </div>
        )
    }
}

export default Dashboard